<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/main.css" rel="stylesheet" />
     	<link href="../css/aboutus.css" rel="stylesheet"/>
	</head>

	<body>
<!-- 
	顶部标签
    -------------------------------------------------------------------------------------------------------------------
-->
		<header class="mui-bar mui-bar-nav" id="botton">
			<h1 class="mui-title" id="zx" id="edu">在线教育</h1>
		</header> 
<!-- 
	底部标签
    -------------------------------------------------------------------------------------------------------------------
-->					
		<nav class="mui-bar mui-bar-tab" >
			<a class="mui-tab-item mui-active" href="#home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#information">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">0</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="#aboutus">
				<span class="mui-icon mui-icon-help"></span>
				<span class="mui-tab-label">关于我们</span>
			</a>
			<a class="mui-tab-item" href="#myown">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
<!-- 
	中间内容
    -------------------------------------------------------------------------------------------------------------------
-->	   
	<div class="mui-content">
		<!--首页---------------------------------------------------------------------------->	
		<div id="home" class="mui-control-content mui-active">
			<div id="main">
		    	<img src="../images/bj.png" id="bj">
					<div id="body">
						<ul>
							<li>
								<a href="subjets.html"><button id="body1" class="flot">在线学习</button></a>
							</li>
							<li>
								<a href="subjets.html"><button id="body2" class="flot">在线答题</button></a>
							</li>
							<li>
								<a href="subjets.html"><button id="body3" class="flot">经典例题</button></a>
							</li>
						</ul>
					</div>		
					<div class="mui-collapse-content">
						<div id="slider" class="mui-slider">
							<div class="mui-slider-group mui-slider-loop"  id="lb" >
								<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate" id="sizes">
									<a href="#">
										<img src="" id="size pic5">
										<div id="one3">消息资讯</div>
										</img>
									</a>	
								</div>
								<!-- 第一张 -->
								<div class="mui-slider-item" id="sizes">
									<a href="#">
										<img src="" id="size pic0" alt="">
										<div id="one">在线学习</div>
										</img>
									</a>
								</div>
								<!-- 第二张 -->
								<div class="mui-slider-item" id="sizes">
									<a href="#">
										<img src="" id="size pic1">
										<div id="one1">在线答题</div>
										</img>
									</a>
								</div>				
								<!-- 第三张 -->
								<div class="mui-slider-item" id="sizes">
									<a href="#">
										<img src="" id="size pic2">
										<div id="one2">经典例题</div>
										</img>
									</a>
								</div>
								<!-- 第四张 -->
								<div class="mui-slider-item" id="sizes">
									<a href="#">
										<img src="" id="size pic3">
										<div id="one3">消息资讯</div>
										</img>
									</a>
								</div>
								<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate" id="sizes">
									<a href="#">
										<img src="" id="size pic4">
										<div id="one">在线学习</div>
										</img>
									</a>
								</div>
							</div>						
						</div>
					</div>	
				</img>
			</div>
		</div>
		<!--消息页面---------------------------------------------------------------------------->		
		<div id="information" class="mui-control-content">				
		</div>
		<!--关于我们页面---------------------------------------------------------------------------->		
		<div id="aboutus" class="mui-control-content">
			<div id="our">
				<div id="one4">				
					<img src="../images/yuantiao.jpg" style="width: 100%;height: 100%;">
						<p id="size">About Us</p>
						<p id="size1">———一生只做教育</p>
					</img>
				</div>	
				<div id="ones">
					<div id="zjdis"></div>
					<p id="zj">吴忠键</p>				
					<img src="../images/zj.png"/ id="zjt">
					<p id="zjn">项目经理,项目开发负责人</p>
				</div>	
				<div id="ones">
					<div id="xcdis"></div>
					<p id="xc">林心晨</p>				
					<img src="../images/xc.png"/ id="xct">
					<p id="xcn">管理员,后台管理</p>
				</div>	
				<div id="ones">
					<div id="dis"></div>
					<p id="zj">邓恒君</p>				
					<img src="../images/hj.png"/ id="hjt">
					<p id="zjn">管理员,登录注册管理</p>
				</div>	
				<div id="ones">
					<div id="dis"></div>
					<p id="sw">石维</p>				
					<img src="../images/xsw.png"/ id="swt">
					<p id="swn">管理员,数据管理</p>
				</div>	
				<div id="ones">
					<p id="sy">伍思宇</p>				
					<img src="../images/sy.png"/ id="syt">
					<p id="syn">管理员，页面管理与设计</p>
				</div>	
			</div>
		</div>
		<!--我的页面---------------------------------------------------------------------------->
		<div id="myown" class="mui-control-content">
			<div class="mui-content">
				<div class="mui-content-padded" style="height:55vw;background-image:url(../images/log_education.png);background-size: 100%;"></div>
					<div class="mui-content-padded">
						<center>
							<div class="mui-inline" style="margin-top: -50px;">
								<img id='u_head' class="mui-icon-image" src="../images/09.jpg" style="height: 80px;border-radius:50%;"/>
							</div>
							<h3 id='u_name'>用户昵称</h3>
						</center>
						<form class="mui-input-group">
							<div class="mui-input-row">
								<label>账号:</label>
								<h4 id='u_username' style="line-height: 140%;">yonghu1</h4>
							</div>
							<div class="mui-input-row">
								<label>年龄:</label>
								<h4 id='u_age' style="line-height: 140%;">22</h4>
							</div>
							<div class="mui-input-row">
								<label>性别:</label>
								<h4 id='u_sex' style="line-height: 140%;">男</h4>
							</div>
							<div class="mui-input-row">
								<label>住址:</label>
								<h4 id='u_address' style="line-height: 140%;">成都-武侯区</h4>
							</div>
							<div class="mui-input-row">
								<label style="width: 33%;">创建时间:</label>
								<h4 id='u_create_time' style="line-height: 140%;width: 72%;">2018-04-22</h4>
							</div>
						</form>
					</div>									
					<div class="mui-content-padded" style="height: 95px;margin-top: 20px;">
						<center>
						<button id="to_user_subject" type="button" class="mui-btn" style="width: 130px;right: 20px;">
							个人题库
						</button>					
						<button id="to_user_change" type="button" class="mui-btn mui-btn-primary" style="width: 130px;left: 20px;">
							编辑信息
						</button>
						</center>
				  	</div>			
			</div>				
		</div>
		
		
		
		
		
		<!-------------------------------------------------------------------------------------------->
		<script src="../js/mui.min.js"></script>		
		<script type="text/javascript">

			mui.init({
				gestureConfig:{
					tap:true
				}
			});
			
			/**
			 * 	document.getElementById("us").addEventListener("tap",function(){
				mui.openWindow({
				url:'aboutus.html'				
			});
			});
			 */
	
			//退出事件
				var first = null;
                var oldback = mui.back;
                mui.back = function() {
                    if(!first) {
                        first = new Date().getTime();
                        mui.toast('再按一次退出应用');
                        setTimeout(function() {
                            first = null;
                        }, 2000);
                    } else {
                        if(new Date().getTime() - first < 2000) {
                            plus.runtime.quit();
                        }
                    }
                };
                		
		</script>
			<script type="text/javascript" src="../js/ip.js" ></script>
		<script>
		/**
		 * 从数据库获取图片路径
		 */
			window.addEventListener('load',function(){
				var URL=IP+"/recommend";
				mui.ajax(URL,{
				type:"post",
				dataType:"json",
				timeout:0,
				contentType:"application/json;charset=UTF-8",
				data:JSON.stringify({
					rOrder:	1				
				}),
				success:function(data){	
					var json=JSON.stringify(data);
					//console.log(json);						
				    document.getElementById("size pic0").src=data[0].rSrc;
				    document.getElementById("size pic1").src=data[1].rSrc;
				    document.getElementById("size pic2").src=data[2].rSrc;
				    document.getElementById("size pic3").src=data[3].rSrc;
				    document.getElementById("size pic4").src=data[0].rSrc;
				    document.getElementById("size pic5").src=data[3].rSrc;
				}				
				});
			})	;	
			
			
			/**
			 * mui.init({
            swipeBack:true //启用右滑关闭功能
        	});
			 */
			
        	var slider = mui("#slider");
        	slider.slider({
        	interval: 3000         //每隔3秒调用一次
        });
			/**
			 * function recom(){
				var URL="http://10.0.21.45:8080/recommend";
				mui.ajax(URL,{
				type:"post",
				dataType:"json",
				contentType:"application/json;charset=UTF-8",
				data:JSON.stringify({
					rId:1,					
				}),
				success:function(data){	
					var json=JSON.stringify(data);
					console.log(json);		
				    document.getElementById("get").src=data.rSrc;
				}				
				});	
			}
			 */		
			 
			 //双击
			/**
			 * mui.plusReady(
				function(){
				document.getElementById("dou").addEventListener("doubletap",function(){
				this.style.width="200%";
				this.style.height="200%";
				document.getElementById("dou").addEventListener("tap",function(){
				this.style.width="100px";
				this.style.height="100px";
			});
			});
			});
			*/
			
			/**
			 * window.addEventListener("doubletap",function(){
				console.log("ok");
			});
			*/
		</script>
	</body>
</html>